<template>
  <div>
    <entry-cell
      name="账号管理"
      v-if="hasLogin"
      @callClick="pushToAccountPage"
      class="xb_border_bottom eee"
    />
    <!-- <entry-cell
      :name="this.pickerType ? '修改乘公交扫码方式' : '设置乘公交扫码方式'"
      :need-border-bottom="true"
      @callClick="modifyBusCardType"
    /> -->
    <entry-cell
      name="检查更新"
      class="xb_border_bottom eee"
      @callClick="checkVersion"
      v-if="isAndroid0"
    >
      <span class="version">{{appversion}}</span>
    </entry-cell>
    <entry-cell
      name="清除缓存"
      @callClick="clear"
    />

    <button
      class="logout_btn"
      v-if="hasLogin"
      @click="logout"
    >退出登录</button>

    <picker-way
      :pickerOption='pickerOption'
      @submitClick="submitClick"
      ref="pickerWay"
    />
  </div>
</template>

<script>
import EntryCell from './components/EntryCell'
import { AppRouterUtils, UserBeanUtils, isAndroid } from 'vue-xiaobu-utils'
import { PickerWay } from 'vue-xb-ui-depot'
import { logout } from './api/api'

// import testLogin from '@/utils/LoginUtil'
// import {getUserThirdInfo} from '@/utils/AjaxForBusOpen'
export default {
  components: {
    EntryCell,
    PickerWay
  },
  data() {
    return {
      hasLogin: UserBeanUtils.isUserLogin(),
      isAndroid0: isAndroid(),
      appversion: '',
      pickerOptionList: ['WX_PAY', 'ALI_PAY', 'UNION_PAY'],
      pickerType: window.localStorage.getItem('BUSCARD_PAYTYPE_CACHE_KEY'),
      pickerOption: { // 选择扫码方式的相关数据
        pickerCover: false, // 弹窗开关状态
        closeBtn: true, // 是否关闭按钮
        closeBtnLeft: true, // 按钮是否在左侧
        name: '设置乘公交扫码方式', // 弹窗标题，必填
        remark: '*乘公交时，将根据所选项跳转至对应的第三方APP', // 说明备注，该值为空或不存在，隐藏该文本区域
        btnText: '确定', // 底部按钮文本，该值为空或不存在，隐藏底部按钮区域
        withoutSelectIcon: false, // 右侧选择图标是否显示，注意是without前缀，传入true，右侧不显示，该值不存在或值为false时，右侧显示
        pickerList: [{
          name: '微信',
          img: require('./assets/wechat.png'),
          selected: false
        }, {
          name: '支付宝',
          img: require('./assets/alipay.png'),
          url: 'alipays://platformapi/startapp?appId=200011235&cardType=T0310100&ext_info=%7B%22channel111%22%3A%22source%22%2C%22subSceneCode%22%3A%220310100%22%7D',
          selected: false
        }, { // 选择组件选项数据，必填，长度至少大于一
          name: '云闪付', // 必填，选项名
          img: require('./assets/unionpay.png'), // 选填，左侧图标 栏，该值为空或不存在，隐藏该左侧图标
          selected: false // 必填，当前选项是否选择，为true则是默认选择项
        }]
      }
    }
  },
  mounted() {
    this._getAppVersion()
    this.resetPickerOptionSelectedIndex()
    if (this.pickerType) {
      this.pickerOption.name = '修改乘公交扫码方式'
    }

    // testLogin()

    // console.dir(getUserThirdInfo())
  },

  watch: {
    'pickerOption.pickerCover'(val) { // 监听扫码方式选择弹窗开关状态，关闭时自动将选中值修改为默认值
      if (!val) {
        this.resetPickerOptionSelectedIndex()
      }
    }
  },

  methods: {
    _getAppVersion() {
      // 获取APP的版本号
      this.$System.then(System => {
        System.getAppVersionInfo((msg) => {
          let vjson = JSON.parse(msg)
          let versionStr = 'V' + vjson.version
          this.appversion = versionStr
        }, () => { })
      })
    },
    pushToAccountPage() {
      // 跳转到账号管理的页面
      AppRouterUtils.open('city-app/account.html?_tv=true&_rv=false')
    },
    clear() {
      // 清除缓存
      this.$UI.then(UI => {
        UI.showDialog(
          '提示',
          '确定要清除缓存?',
          '确认',
          '取消',
          msg => {
            // eslint-disable-next-line eqeqeq
            if (msg == 0) {
              // 首页 小铃铛的提示缓存标记不清除
              // let hasShowNoticeDescImg = window.localStorage.getItem('hasShowNoticeDescImg')
              // h5的缓存不清除
              // window.localStorage.clear()
              // if (hasShowNoticeDescImg) { window.localStorage.setItem('hasShowNoticeDescImg', 'true') }
              this.$System.then(System => { System.cleanCache(() => { }, () => { }) })
              this.$toastMsg('清除缓存成功')
            }
          },
          function (msg) { }
        )
      })
    },
    checkVersion() {
      // 检查更新
      this.$System.then(System => {
        System.checkAppVersion(() => { }, () => { })
      })
    },
    logout() {
      // 退出登录
      this.$UI.then(UI => {
        UI.showDialog(
          '提示',
          '确定要退出登录?',
          '确定',
          '取消',
          msg => {
            // eslint-disable-next-line eqeqeq
            if (msg == 0) {
              try {
                logout()
                // 退出登录不清除收藏线路信息
                let routeItem = window.localStorage.getItem('fegiuSDGIbkjd')// 获取本地收藏线路信息
                window.localStorage.clear()
                if (routeItem) {
                  localStorage.setItem('fegiuSDGIbkjd', routeItem)
                }
                AppRouterUtils.goBack()
              } catch (err) {
              }
            }
          },
          function (msg) { }
        )
      })
    },
    // modifyBusCardType() { // 设置默认的公交扫码方式
    //   this.pickerOption.pickerCover = true
    // },
    submitClick(index) { // 点击保存默认扫码方式
      if (index < 0) {
        this.$toastMsg('请先选择扫码方式')
      } else {
        window.localStorage.setItem('BUSCARD_PAYTYPE_CACHE_KEY', this.pickerOptionList[index])
        this.pickerType = window.localStorage.getItem('BUSCARD_PAYTYPE_CACHE_KEY')
        this.pickerOption.name = '修改乘公交扫码方式'
        this.pickerOption.pickerCover = false
        this.resetPickerOptionSelectedIndex()
        this.$toastMsg('保存成功')
      }
    },
    resetPickerOptionSelectedIndex() { // 将扫码方式重置为当前默认方式，已保存扫码默认值当前即为保存的默认值，否则为-1
      let index = this.pickerType ? this.pickerOptionList.indexOf(this.pickerType) : -1
      this.$refs.pickerWay.selectOne(index)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}
.version {
  color: #3089ff;
  font-size: 16px; /*no*/
  line-height: 24px; /*no*/
}
.logout_btn {
  position: absolute;
  left: 32px;
  bottom: 90px;
  width: 686px;
  height: 72px;
  background: #fff;
  border: none;
  border-radius: 25px; /* no */
  color: #333;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
}
</style>
